<template>
  <div class="source-container flex w_100 h_100">
    <aside class="source-aside">
      <div class="flex_column">
        <div v-for="(menu,idx) in menuList" :class="activeIdx===menu.id?'source_item_active':''"
             class="source_item cursor_point pl_50 pr_30 pb_0 pt_0 info_hover fontsize_14"
             @click="handleChangeMenu(idx,menu.path)">
          <span class="pb_8 cursor_point">
             {{ menu.name }}
          </span>
        </div>
      </div>
    </aside>
    <div class="source-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  name: "my-data",
  setup () {
    const route = useRoute();
    const router = useRouter();
    const menuList = ref([{
      id: 0,
      name: "数据源",
      path: "/data/source",
    }, {
      id: 1,
      name: "数据集",
      path: "/data/type",
    }])
    const activeIdx = ref(0);
    const path = computed(() => {
      return route.path;
    });
    watch(() => route.path, s => {
      if (s.includes("/data/source")) {
        activeIdx.value = 0
      } else {
        activeIdx.value = 1
      }
    });
    const handleChangeMenu = (idx, path) => {
      if (activeIdx.value === idx) {
        return
      }
      activeIdx.value = idx
      router.push({ path })
    }
    onMounted(()=>{
      if (route.path.includes("/data/source")) {
        activeIdx.value = 0
      } else {
        activeIdx.value = 1
      }
    })
    return {
      path,
      menuList,
      activeIdx,
      handleChangeMenu,
    };
  }
});
</script>

<style lang="less" scoped>
@import "data.less";
</style>